<template>
	<!-- 签到 -->
	<view class="signIn">
		<!-- 当前位置 -->
		<view class="currentlocation">
			<view class="currentlocation-bg" >
				<image :src="imgUrl+'location1.png'" mode=""></image>
			</view>
			<view class="currentlocation-top">
				<view class="img">
					<image :src="imgUrl+'location2.png'" mode=""></image>
				</view>
				<view class="currentlocation-top-text" @click="getaddrss()">
					当前位置
				</view>
			</view>


			<view class="currentlocation-center">
				<text>{{currentSite.city}}{{currentSite.district}}</text>
			</view>
			<view class="currentlocation-bottom">
				<text>{{currentSite.address}}</text>
			</view>



			<u-line />
			<!-- 点击签到 -->
			<view class="currentlocation-clicksignin">
				<view class="currentlocation-clicksignin-left">
					<view @click="chooseLocation">手动设置</view>
					<u-icon name="arrow-right" color="#ff6c58" size="16"></u-icon>
				</view>
				<view class="currentlocation-clicksignin-right" @tap="clickSignin">
					签到
				</view>
			</view>

		</view>
		<!-- 地图 -->
		<view class="map-loctionMap">
			<view class="locationmap-top">
				<view class="locationmap-top-left">
					服务区域(半径{{radius}}km)
				</view>
				<view class="locationmap-top-counter">
					<view class="cut" @click="cut">
						<image :src="imgUrl+'add.png'" mode=""></image>
					</view>
					<view class="num">
						<input type="number" style="width: 100rpx;text-align: center;" v-model="radius">
					</view>
					<view class="add" @click="add">
						<image :src="imgUrl+'cut.png'" mode=""></image>
					</view>
				</view>
			</view>
			<u-line />
			<view class="locationmap-map">
				<map :circles="circles" :longitude="longitude" :scale="scale" :latitude="latitude"
					:markers="covers" />
			</view>

		</view>

		<!-- 签到成功遮蔽层 -->
		<!-- <view class="shield" v-if="signIn" @click="clickSignin">
			<view class="img">
				<image :src="imgUrl+'qdcg.png'" mode=""></image>
			</view>

		</view> -->
	</view>
</template>

<script>
	import {
		signIn,
		getMyIndex,
		map_address
	} from "./api.js"
	import store from "../../store/index.js"
	export default {
		onReady() {
			if (this.$store.state.latAndLng.lat == "") {
				this.handleLocation()
			}
			this.getaddrss()
		},
		onShow() {
			// 获取个人信息
			this.images()	
		},
		computed: {
			currentSite() {
				
				return this.$store.state.currentSite
			},
			latAndLng() {
				let latAndLngs = this.$store.state.latAndLng
			/* 	console.log(this.$store.state,'//////'); */
				this.circles[0].latitude = latAndLngs.lat
				this.circles[0].longitude = latAndLngs.lng
				this.covers[0].latitude = latAndLngs.lat
				this.covers[0].longitude = latAndLngs.lng
				return latAndLngs
			},
		},
		data() {
			return {
				imgUrl: this.$store.state.imgUrl,

				signIn: false, //签到状态
				radius: 30, //区域半径
				latitude: 26.22,
				longitude: 111.63,
				scale: 13,
				circles: [{
					latitude: 26.22,
					longitude: 111.63,
					radius: 30,
					strokeWidth: 2,
					color: "#FFB83C",
					fillColor: "#ffaa003c",
				}],
				covers: [{
					latitude: 26.22,
					longitude: 111.63,
					iconPath: this.$store.state.imgUrl + "dt.png",
					callout: {
						content: "",
						bgColor: "white",
						display: "ALWAYS",
						padding: "12rpx"
					},
					width: "40rpx",
					height: "40rpx"
				}],
				status:false

			}
		},
		methods: {
			images(){
				let that = this
				let token = uni.getStorageSync("token")
				getMyIndex(token).then(res => {
					console.log(res,"个人信息")
					if(res.code == 200){
					this.radius = res.data.radius
					this.latitude=res.data.site_latitude
					this.longitude=res.data.site_longitude
					/* this.currentSite.city=res.data.site_city
					this.currentSite.address=res.data.site_address */
					}
				})
			},
			Dzarr(longitude, latitude) {
				map_address({
					longitude: longitude,
					latitude: latitude
				}).then(res => {
					console.log(res,"位置信息")
			
				})
		
			},
			//获取当前定位
			getaddrss(){
				uni.getLocation({
					altitude: false,
					geocode: true,
					type: 'gcj02',
					success: (res1) => {
						console.log(res1, "打印的res值获取city")
						map_address({
							longitude: res1.longitude,
							latitude: res1.latitude
						}).then(res => {
			
							
							let latAndLng = {}
													latAndLng.lat = res1.latitude
													latAndLng.lng = res1.longitude
											
													var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
													var REGION_PROVINCE = [];
													var currentSite = {
														province: '',
														city: '',
														district: '',
														address: ''
													};
													console.log(res,"位置信息")
													var reg = /.+?(省|市|自治区|自治州|县|区)/g;
													var addressList=res.data.formatted_address.match(reg)
													console.log(res.data.formatted_address + ': ', res.data.formatted_address.match(reg));
													if(addressList[0]=='北京市'||addressList[0]=='天津市'||addressList[0]=='上海市'||addressList[0]=='重庆市'){
														
														if(addressList.length>0){
															currentSite.province = addressList[0];
															
														}
														if(addressList.length>1){
															currentSite.city = addressList[0];;
														}
														if(addressList.length>2){
															currentSite.district = addressList[1];;
														}
														if(addressList.length>1){
															var str=addressList[1]
															var list=res.data.formatted_address.split(str)
															console.log(list)
															if(list.length>1){
															currentSite.address = list[1] ;
															}
														}
														
														
														}else{
															if(addressList.length>0){
																currentSite.province = addressList[0];
																
															}
															if(addressList.length>1){
																currentSite.city = addressList[1];
															}
															if(addressList.length>2){
																currentSite.district = addressList[2];
															}
															if(addressList.length>0){
																var str=addressList[addressList.length-1]
																var list=res.data.formatted_address.split(str)
																console.log(list)
																if(list.length>1){
																currentSite.address = list[1] ;
																}
															}
														}
													
												
														this.currentSite=currentSite
													this.$store.dispatch("actionsChangeLatAndLng", latAndLng)
													this.$store.dispatch("actionsChangecurrentSite", currentSite)
							// let latAndLng = {}
							// latAndLng.lat = res.latitude
							// latAndLng.lng = res.longitude
							// // let currentSite = {}
							// var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
							// var REGION_PROVINCE = [];
							// var currentSite = {
							// 	province: null,
							// 	city: null,
							// 	district: null,
							// 	address: null
							// };
												
							// if (!regex.exec(res1.data.formatted_address)) {
							// 	regex = /^(.*?(省|自治区))(.*?)$/;
							// 	console.log(res1,'我的大大');
							// 	REGION_PROVINCE = regex.exec(res1.data.formatted_address);
								
							// 	currentSite.province = REGION_PROVINCE[1];
							// 	currentSite =this.regexAddressBean(REGION_PROVINCE[3], currentSite,res);
							// } else {
							// 	REGION_PROVINCE = regex.exec(res1.data.formatted_address);
							// 	currentSite.province = REGION_PROVINCE[1];
							// 	currentSite =this.regexAddressBean(res1.data.formatted_address, currentSite,res1);
							// }
							//   console.log(currentSite,"1：currentSite")
							// /* this.currentSite=currentSite */
							
							
												
							// this.$store.dispatch("actionsChangeLatAndLng", latAndLng)
							// this.$store.dispatch("actionsChangecurrentSite", currentSite)
									
						})
						
							// this.Dzarr(res.longitude, res.latitude)
						// let {
						// 	latitude,
						// 	longitude,
						// 	address
						// } = res;
						// if (!address) {
						// 	address = {}
						// }
						// address.longitude = longitude;
						// address.latitude = latitude;
						// let latAndLng = {}
						// latAndLng.lat = address.latitude;
						// latAndLng.lng = address.longitude;
						// var currentSite = {
						// 	province: null,
						// 	city: null,
						// 	district: null,
						// 	address: null
						// };
						// currentSite.province=res.address.province
						// currentSite.city=res.address.city
						// currentSite.district=res.address.district
						// currentSite.address=res.address.street+res.address.streetNum+res.address.poiName
						// this.$store.dispatch("actionsChangeLatAndLng", latAndLng)
						// this.$store.dispatch("actionsChangecurrentSite", currentSite)
						
						
				
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			// 选择位置
			chooseLocation() {
				this.handleLocation()
			},
			//手动设置地址
			handleLocation() {
				uni.chooseLocation({
					success: (res) => {
			
			
						let latAndLng = {}
						latAndLng.lat = res.latitude
						latAndLng.lng = res.longitude
						// let currentSite = {}
						var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
						var REGION_PROVINCE = [];
						var currentSite = {
							province: '',
							city: '',
							district: '',
							address: ''
						};
						console.log(res)
						var reg = /.+?(省|市|自治区|自治州|县|区)/g;
						var addressList=res.address.match(reg)
						console.log(res.address + ': ', res.address.match(reg));
						if(addressList[0]=='北京市'||addressList[0]=='天津市'||addressList[0]=='上海市'||addressList[0]=='重庆市'){
							
							if(addressList.length>0){
								currentSite.province = addressList[0];
								
							}
							if(addressList.length>1){
								currentSite.city = addressList[0];;
							}
							if(addressList.length>2){
								currentSite.district = addressList[1];;
							}
							if(addressList.length>1){
								var str=addressList[1]
								var list=res.address.split(str)
								console.log(list)
								if(list.length>1){
								currentSite.address = list[1]+res.name ;
								}
							}
							
							
							}else{
								if(addressList.length>0){
									currentSite.province = addressList[0];
									
								}
								if(addressList.length>1){
									currentSite.city = addressList[1];
								}
								if(addressList.length>2){
									currentSite.district = addressList[2];
								}
								if(addressList.length>0){
									var str=addressList[addressList.length-1]
									var list=res.address.split(str)
									console.log(list)
									if(list.length>1){
									currentSite.address = list[1]+res.name ;
									}
								}
							}
						
						
						console.log(currentSite,"1：currentSite")
						
					 
					 
						// if (!regex.exec(res.address)) {
						
						// 	regex = /^(.*?(省|自治区))(.*?)$/;
						// 	console.log(res,'我的大大');
						// 	REGION_PROVINCE = regex.exec(res.address);
						// 	console.log('REGION_PROVINCE',REGION_PROVINCE);
							
						// 	currentSite.province = REGION_PROVINCE[1];
						// 	currentSite =this.regexAddressBean(REGION_PROVINCE[3], currentSite,res);
						// } else {
						// 	REGION_PROVINCE = regex.exec(res.address);
						// 	currentSite.province = REGION_PROVINCE[1];
						// 	currentSite =this.regexAddressBean(res.address, currentSite,res);
						// }
						  // console.log(currentSite,"1：currentSite")
						/* this.currentSite=currentSite */
			
			
					 this.currentSite=currentSite
						this.$store.dispatch("actionsChangeLatAndLng", latAndLng)
						this.$store.dispatch("actionsChangecurrentSite", currentSite)
					}
				});
			},
			
			clickSignin() {
					if (this.signIn) {
						return this.signIn = false
					}
					let that = this
					console.log(that.$store.state.currentSite,'*****');
					let province=that.$store.state.currentSite.province
					let c=that.$store.state.currentSite.city
					let city=that.$store.state.currentSite.city
			// 		city=city+'市'
			
			// 		if(c=='北京市'||c=='天津市'||c=='上海市'||c=='重庆市'){
			// 			 city=c
			// 		}
					let district=that.$store.state.currentSite.district
					let address=that.$store.state.currentSite.address
					signIn({
						/* ...that.$store.state.currentSite, */
						province:province,
						city:city,
						district:district,
						address:address,
						...that.$store.state.latAndLng,
						radius: this.radius
					}).then(res => {
						this.signIn = false
						if(res){
							uni.showToast({
							icon:"success",
							title:'签到成功'
							})
						setTimeout(function(){
							uni.navigateBack({
								delta: 2
							});
						},1000)
						}
					}).catch(err => {
						if(err){
							uni.showToast({
							icon:"success",
							title:'签到成功'
							})
						setTimeout(function(){
							uni.navigateBack({
								delta: 2
							});
						},1000)
						}
					})
				
				},
			// 区域减
			cut() {
				if (this.radius <= 1) return false
				this.radius--

				this.circles[0].radius = 1000 * this.radius
				console.log(this.circles[0].radius,"4：this.cirles[0].reaiulds")
			},
			//区域加
			add() {
				this.radius++
				this.circles[0].radius = 1000 * this.radius
			},

		}
	}
</script>

<style lang="less">
	.signIn {
		width: 100%;
		height: 100%;

		.currentlocation {
			position: relative;
			background: #fff;
			width: 686rpx;
			min-height: 108rpx;
			border-radius: 16rpx;
			margin: 0 auto;
			padding-left: 24rpx;

			.currentlocation-bg {
				position: absolute;
				right: 0;
				top: 0;
				width: 172rpx;
				height: 172rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.currentlocation-top {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				height: 88rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #262626;


				.img {
					width: 44rpx;
					height: 44rpx;
					margin-right: 8rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.currentlocation-center {
				font-size: 28rpx;
				font-weight: 500;
				color: #262626;
			}

			.currentlocation-bottom {
				margin-top: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				margin-bottom: 20rpx
			}

			.currentlocation-clicksignin {
				height: 112rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.currentlocation-clicksignin-left {
					height: 100%;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 500;
					color: #0ea07f;

					view {
						margin-top: -3rpx;
						margin-right: 10rpx;
					}
				}

				.currentlocation-clicksignin-right {
					width: 160rpx;
					height: 64rpx;
					background: #0ea07f;
					border-radius: 8rpx;
					margin-right: 24rpx;
					text-align: center;
					line-height: 64rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;

				}
			}
		}


		.map-loctionMap {
			margin: 0 auto;
			width: 686rpx;
			height: 792rpx;
			margin-top: 26rpx;
			background: #fff;


			.locationmap-top {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 96rpx;
				padding: 0 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #262626;

				.locationmap-top-counter {
					box-sizing: border-box;
					width: 176rpx;
					height: 56rpx;
					background: #F7F8F9;
					border-radius: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;

					.add {
						width: 28rpx;
						height: 28rpx;
						margin-top: -8rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.cut {
						width: 28rpx;
						height: 28rpx;
						margin-top: -30rpx;

						image {
							width: 100%;
							height: 21.4%;
						}
					}

					.num {
						font-size: 28rpx;
						font-weight: 500;
						color: #000000;
					}
				}


			}

			.locationmap-map {
				box-sizing: border-box;
				padding: 24rpx 24rpx 32rpx 24rpx;
				width: 100%;
				height: 695rpx;

				map {
					width: 100%;
					height: 100%;
				}
			}
		}

		.shield {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, .6);
			display: flex;
			align-items: center;
			justify-content: center;

			.img {
				width: 379rpx;
				height: 390rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
